<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>紫云JOB系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/font-awesome.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="${request.contextPath}/statics/css/all-skins.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/main.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<!-- ADD THE CLASS layout-boxed TO GET A BOXED LAYOUT -->
<body class="hold-transition skin-blue sidebar-mini layout-top-nav">
<!-- Site wrapper -->
<div class="wrapper" id="rrapp" v-cloak>
    <header class="main-header">
        <nav class="navbar navbar-static-top">
            <div class="container-fluid">
                <!--左侧LOG-->
                <div class="navbar-header">
                    <a href="" class="navbar-brand"><b>紫云</b>JOB</a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#navbar-collapse">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>

                <!-- 菜单项 -->
                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <!--中间动态菜单-->
                    <ul class="nav navbar-nav my-menu">
                        <menu-item :item="item" :index="index" v-for="(item,index) in menuList"></menu-item>
                    </ul>
                    <!--顶部右侧菜单-->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- 信息下拉-->
                        <!--<li class="dropdown messages-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-envelope-o"></i>
                                <span class="label label-success">{{message.count}}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">你有{{message.count}}条新消息</li>
                                <li>
                                    &lt;!&ndash; inner menu: contains the actual data &ndash;&gt;
                                    <ul class="menu" v-for="item in message.items">
                                        <li>&lt;!&ndash; start message &ndash;&gt;
                                            <a href="#">
                                                <div class="pull-left">
                                                    {{item.messageType}}
                                                </div>
                                                <h4>
                                                    {{item.title}}
                                                    <small><i class="fa fa-clock-o"></i> {{item.displayDate}}</small>
                                                </h4>
                                                &lt;!&ndash;<p>Message Excerpt</p>&ndash;&gt;
                                            </a>
                                        </li>&lt;!&ndash; end message &ndash;&gt;
                                    </ul>
                                </li>
                                <li class="footer"><a href="#">查看全部</a></li>
                            </ul>
                        </li>-->
                        <!-- 通知下拉信息 -->
                        <!--<li class="dropdown notifications-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-bell-o"></i>
                                <span class="label label-warning">{{message.count}}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">你有{{message.count}}条新消息</li>
                                <li>
                                    &lt;!&ndash; inner menu: contains the actual data &ndash;&gt;
                                    <ul class="menu">
                                        <li v-for="item in message.items">
                                            <a href="#">
                                                <i class="fa fa-users text-aqua"></i>{{item.title}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="footer"><a href="#">查看全部</a></li>
                            </ul>
                        </li>-->
                        <!-- 任务下拉信息 -->
                        <!--<li class="dropdown tasks-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-flag-o"></i>
                                <span class="label label-danger">9</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header">You have 9 tasks</li>
                                <li>
                                    &lt;!&ndash; inner menu: contains the actual data &ndash;&gt;
                                    <ul class="menu">
                                        <li>&lt;!&ndash; Task item &ndash;&gt;
                                            <a href="#">
                                                <h3>
                                                    设计按钮
                                                    <small class="pull-right">20%</small>
                                                </h3>
                                                <div class="progress xs">
                                                    <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                                        <span class="sr-only">20% Complete</span>
                                                    </div>
                                                </div>
                                            </a>
                                        </li>&lt;!&ndash; end task item &ndash;&gt;
                                        ...
                                    </ul>
                                </li>
                                <li class="footer">
                                    <a href="#">View all tasks</a>
                                </li>
                            </ul>
                        </li>-->
                        <!-- 用户下拉信息 -->
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="${request.contextPath}/statics/img/logo_3.png" class="user-image"
                                     alt="User Image">
                                <span class="hidden-xs">{{user.username}}</span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- User image -->
                                <li class="user-header">
                                    <img src="${request.contextPath}/statics/img/logo_3.png" class="img-circle"
                                         alt="User Image">
                                    <p>
                                        {{user.username}}
                                        <small>欢迎使用紫云JOB</small>
                                    </p>
                                </li>
                                <!-- Menu Body -->
                                <!--<li class="user-body">
                                    &lt;!&ndash;<div class="col-xs-4 text-center">
                                        <a href="#">Followers</a>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <a href="#">Sales</a>
                                    </div>
                                    <div class="col-xs-4 text-center">
                                        <a href="#">Friends</a>
                                    </div>&ndash;&gt;
                                </li>-->
                                <!-- Menu Footer-->
                                <li class="user-footer">
                                    <div class="pull-left">
                                        <a href="javascript:;" @click="updatePassword"><i class="fa fa-lock"></i> &nbsp;修改密码</a></a>
                                    </div>
                                    <div class="pull-right">
                                        <a href="logout"><i class="fa fa-sign-out"></i> &nbsp;退出系统</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </header>
    <!-- 内容区域 -->
    <div class="content-wrapper">
        <!-- 内容头部 -->
        <section class="content-header">
            <ol class="breadcrumb" id="nav_title" style="position:static;float:none;">
                <li class="active"><i :class="navIcon"
                                      style="font-size:20px;position:relative;top:2px;left:-3px;"></i> &nbsp;
                    {{navMenu}}
                </li>
                <li class="active">{{navTitle}}</li>
            </ol>
        </section>

        <!-- 主要内容区域 iframe 显示 -->
        <section class="content" style="background:#fff;">
            <iframe id="mainFrame" name="mainFrame" scrolling="yes" frameborder="0"
                    style="overflow: hidden; width:100%;min-height:200px;overflow:visible;background:#fff;"
                    :src="main"></iframe>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            Version 3.2.0
        </div>
        Copyright &copy; 2018 <a href="http://www.11ziyun.com" target="_blank">紫云</a> All Rights Reserved
    </footer>

    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>

    <!-- 修改密码 -->
    <div id="passwordLayer" style="display: none;">
        <form class="form-horizontal">
            <div class="form-group">
                <div class="form-group">
                    <div class="col-sm-2 control-label">账号</div>
                    <span class="label label-success" style="vertical-align: bottom;">{{user.username}}</span>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">原密码</div>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" v-model="password" placeholder="原密码"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label">新密码</div>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" v-model="newPassword" placeholder="新密码"/>
                    </div>
                </div>
            </div>
        </form>
    </div>

</div>
<!-- ./wrapper -->


<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${request.contextPath}/statics/libs/vue.min.js"></script>
<script src="${request.contextPath}/statics/libs/router.js"></script>
<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${request.contextPath}/statics/libs/app.js"></script>
<script src="${request.contextPath}/statics/plugins/layer/layer.js"></script>
<script src="${request.contextPath}/statics/js/index.js"></script>
</body>
</html>
<style>
    /*ul.nav li.actives.active{background: #ffffff;}*/
    div.menu_pos{display: none;    position: absolute;
        top: 0;
        bottom: -5px;
        left: 0;
        right: 0;
        z-index: 99999999;
        /*display: none;*/
        background-color: rgba(200,0,0,0);}

    .nav_contain{border: 1px solid #1e98e2;border: 1px solid #1e98e2;position: absolute;top: 50px;background-color: #d2f2ff;overflow: hidden;}
    .nav>li div.nav_contain ul.menu{width: 100%;/*overflow: hidden;*/padding-left: 0;}
    .nav>li div.nav_contain ul.menu li.nav_type{list-style: none;float: left;width:120px;text-align: center;line-height: 30px;
        background-color: #1e98e2;color: #ffffff;border-right: 1px solid #6dd3fc;position: relative;}
    .nav>li div.nav_contain ul.menu li.nav_type:last-child{border-right: none;}
    .nav>li div.nav_contain ul.menu li.nav_type ul.lists{position: absolute;top: 30px;width: 100%;padding-left: 0;    border-right: 1px solid #6dd3fc;}
    .nav>li div.nav_contain ul.menu li.nav_type ul.lists li{list-style: none;background-color: #d2f2ff;border-bottom: 1px dotted #4c4c4c;color: black;height: 30px;}
    .nav>li div.nav_contain ul.menu li.nav_type ul.lists li a{display: inline-block;width: 100%;height: 100%;color: black;}
    .nav>li div.nav_contain ul.menu li.nav_type ul.lists li a:hover{background: #2FB5F7;}
</style>